<?php // Homepage ?>
<?php
	$sql_pc = "	select a.*, b.filename
				from tbl_product_category a 
					left join ms_file b
						on a.productcategoryurlimage = b.fileid and b.stsrc = 'A'
				where 	a.stsrc = 'A' 
					and a.productcategorystatus = 1 
				order by a.productcategoryposition asc
				
				";
	$exe_pc = mysql_query($sql_pc) or die(mysql_error());
	$num_pc = mysql_num_rows($exe_pc);
	
	
	$sql_promo = "	select a.*, b.filename
					from tbl_product_detail a 
						left join ms_file b
							on a.productdetailurlimage = b.fileid and b.stsrc = 'A'
					where a.stsrc = 'A' and a.productdetailstatus = 1 and a.productdetailpromo = 1
					order by a.productdetailposition asc
					
					";
	$exe_promo = mysql_query($sql_promo) or die(mysql_error());
	$num_promo = mysql_num_rows($exe_promo);
	
	// $num_pc = 0;	// dummy product category on / off
	// $num_promo = 0;	// dummy promo on / off
	
	$product_category = false;
	$promo = false;
	if($num_pc > 0){$product_category = true;}
	if($num_promo > 0){$promo = true;}
	
	if($product_category || $promo)
	{
?>
<div style="width:100%; height:280px;">
	<?php if($product_category){ ?>
	<?php if($promo){ ?>
	<div style="float:left; width:49%;">
	<?php }else{ ?>
	<div style="float:left; width:100%;">
	<?php } ?>
		<div>
			<h2>Product Categories</h2>
		</div>
		<div style="padding-bottom:20px;">
			<div class="infiniteCarousel">
				<?php if($product_category == true && $promo == false){ ?>
				<div class="wrapper2">
				<?php }else{ ?>
				<div class="wrapper">
				<?php } ?>
					<ul>
						<?php
							while($row_pc = mysql_fetch_array($exe_pc))
							{
						?>
						<li>
							<a class="carousel_link" href="/product/<?php echo $row_pc['productcategoryname']; ?>" title="<?php echo $row_pc['productcategoryname']; ?>">
								<span class="carousel_span"><?php echo ucwords($row_pc['productcategorylabel']); ?></span>
								<img src="<?php echo getURLdomain()."/upload/".$row_pc['filename']; ?>" alt="<?php echo $row_pc['productcategoryname']; ?>" />
							</a>
						</li>
						<?php
							}
						?>
						<?php
							if(!($num_pc%2==0) && ($product_category == true && $promo == false))	// Add dummy space if promo is not exist and product category row is odd
							{
						?>
						<li><a class="carousel_link" ><span class="carousel_span" style="background-color:transparent;">&nbsp;</span></a></li>
						<?php
							}
						?>
					</ul>        
				</div>
			</div>
		</div>
	</div>
	<?php } ?>
	<?php if($product_category && $promo){ ?>
	<div style="float:left; width:2%;">&nbsp;</div>
	<?php } ?>
	<?php if($promo){ ?>
	<?php if($product_category && $promo){ ?>
	<div style="float:left; width:49%;">
	<?php }else{ ?>
	<div style="float:left; width:100%;">
	<?php } ?>
		<div>
			<h2>Special Promo</h2>
		</div>
		<div style="padding-bottom:20px;">
			<div class="infiniteCarousel3">
				<?php if($product_category == false && $promo == true){ ?>
				<div class="wrapper2">
				<?php }else{ ?>
				<div class="wrapper">
				<?php } ?>
					<ul>
						<?php
							while($row_promo = mysql_fetch_array($exe_promo))
							{
						?>
						<li>
							<a class="carousel_link" href="/product/<?php echo $row_promo['productdetailname']; ?>" title="<?php echo $row_promo['productdetailname']; ?>">
								<span class="carousel_span"><?php echo ucwords($row_promo['productdetaillabel']); ?></span>
								<img src="<?php echo getURLdomain()."/upload/".$row_promo['filename']; ?>" alt="<?php echo $row_promo['productdetailname']; ?>" />
							</a>
						</li>
						<?php
							}
						?>
						<?php
							if(!($num_promo%2==0) && ($product_category == false && $promo == true))	// Add dummy space if promo is not exist and product category row is odd
							{
						?>
						<li><a class="carousel_link" ><span class="carousel_span" style="background-color:transparent;">&nbsp;</span></a></li>
						<?php
							}
						?>
					</ul>        
				</div>
			</div>
		</div>
	</div>
	<?php } ?>
	<div class="clear"></div>
</div>
<?php
	}
?>
<?php
	$sql = "select a.productbrandfullsupportstatus, a.productbrandfullsupportlink, a.productbrandname, b.productcategoryname, c.filename
			from tbl_product_brand a 
				left join tbl_product_category b
					on a.productcategoryid = b.productcategoryid
				left join ms_file c
					on a.productbrandurlimage = c.fileid and b.stsrc = 'A'
			where 	a.stsrc = 'A' 
				and a.productbrandstatus = 1 
				and a.productbrandfullsupport = 1
			order by a.productbrandposition asc
			
			";
	$exe = mysql_query($sql) or die(mysql_error());
	$num = mysql_num_rows($exe);
	
	if($num > 0)
	{
?>
<div>
	<h2>Full Support</h2>
</div>
<div style="padding: 10px 0 20px 0; width:100%;">
	<?php
		$column = 4;
		$index = 1;
		for($i=0;$i<ceil($num/$column);$i++)
		{
	?>
			<div style="padding-top:10px;">
	<?php
			for($j=1;$j<=$column;$j++)
			{
				if($index <= $num)
				{
					$row = mysql_fetch_array($exe);
	?>
				<div style="float:left; width:24.9%; text-align:center;">
					<?php if($row['productbrandfullsupportstatus']){ ?>
					<a href="<?php echo $row['productbrandfullsupportlink']; ?>">
					<?php }else{ ?>
					<a href="product/<?php echo $row['productcategoryname']."/".$row['productbrandname']; ?>">
					<?php } ?>
						<img src="<?php echo getURLdomain()."/upload/".$row['filename']; ?>" style="max-width:180px; max-height:80px;" />
					</a>
				</div>
	<?php
					$index++;
				}
			}
	?>
				<div class="clear"></div>
			</div>
	<?php
		}
	?>
</div>
<?php
	}
?>
<?php
	$sql_lp = "	select 	a.productdetailname, a.productdetailurlimage,
						b.productclassname, c.productbrandname, d.productcategoryname,
						e.filename
				from tbl_product_detail a 
					left join tbl_product_class b
						on a.productclassid = b.productclassid
					left join tbl_product_brand c
						on b.productbrandid = c.productbrandid
					left join tbl_product_category d
						on c.productcategoryid = d.productcategoryid
					left join ms_file e
						on a.productdetailurlimage = e.fileid and b.stsrc = 'A'
				where 	a.stsrc = 'A' 
					and a.productdetailstatus = 1 
					and a.productdetaillatest = 1 
				order by a.productdetailposition asc
				";
	//echo $sql_lp;
	$exe_lp = mysql_query($sql_lp) or die(mysql_error());
	$num_lp = mysql_num_rows($exe_lp);
	
	if($num_lp > 0)
	{
?>
<div>
	<h2>Latest Product</h2>
</div>
<div style="padding-bottom:160px;">
	<div style="padding-bottom:20px;">
		<div class="infiniteCarousel2">
			<div class="wrapper2">
				<ul>
					<?php
						while($row_lp = mysql_fetch_array($exe_lp))
						{
					?>
					<li>
						<a class="carousel_link2" href="/product/<?php echo $row_lp['productcategoryname']."/".$row_lp['productbrandname']."/".$row_lp['productclassname']."/".$row_lp['productdetailname']; ?>" title="<?php echo $row_lp['productdetailname']; ?>">
							<img src="<?php echo getURLdomain()."/upload/".$row_lp['filename']; ?>" alt="<?php echo $row_lp['productdetailname']; ?>" />
						</a>
					</li>
					<?php
						}
					?>
					<?php
						if(!($num_lp%3==0))	// Add dummy space if promo is not exist and product category row is odd
						{
							if($num_lp%3==2)	// if 4, 7, 10, ...
							{
					?>
					<li><a class="carousel_link2">&nbsp;</a></li>
					
					<?php
							}
							else if($num_lp%3==1)	// if 5, 8, 11, ...
							{
					?>
					<li><a class="carousel_link2">&nbsp;</a></li>
					<li><a class="carousel_link2">&nbsp;</a></li>
					<?php
							}
						}
					?>
				</ul>
			</div>
		</div>
	</div>
</div>
<?php
	}
?>
<?php
	$sql = "select a.* , c.filename
			from tbl_text a 
				left join ms_module b 
					on a.moduleid = b.moduleid and b.stsrc = 'A' 
				left join ms_file c
					on a.texturlimage = c.fileid and c.filerole = 'image' and c.stsrc = 'A'
			where 	a.stsrc = 'A' 
				and b.modulename = 'article' 
				and b.moduleid = 5 
				and a.textstatus = 1 
			order by a.datein desc, a.dateup desc
			limit 0,1
			";
	$exe = mysql_query($sql) or die(mysql_error());
	$num = mysql_num_rows($exe);
	$row = mysql_fetch_array($exe);
	
	if($num > 0)
	{
?>
<div>
	<h2>Latest Article</h2>
</div>
<div style="padding-bottom:20px;">
	<?php
		if($row['texturlimage'] != "" || !empty($row['texturlimage']))
		{
	?>
	<div style="float:left; width:30%; text-align:center; padding-top: 20px;">
		<a href="<?php echo getURLdomain(); ?>/article/<?php echo stripslashes(html_entity_decode($row['textname'])); ?>">
			<img src="<?php echo getURLdomain()."/upload/".$row['filename']; ?>" style="max-width:200px; max-height:200px;" />
		</a>
	</div>
	<div style="float:left; width:5%;">&nbsp;</div>
	<div style="float:left; width:65%;">
	<?php
		}
		else
		{
	?>
	<div style="float:left; width:100%;">
	<?php
		}
	?>
		<a href="<?php echo getURLdomain(); ?>/article/<?php echo stripslashes(html_entity_decode($row['textname'])); ?>"><h3 style="color:#664e36;"><?php echo stripslashes(html_entity_decode($row['textlabel'])); ?></h3></a>
		<p><?php echo stripslashes(html_entity_decode($row['textheader'])); ?></p>
		<p><a class="home_read_more_link" href="<?php echo getURLdomain(); ?>/article/<?php echo stripslashes(html_entity_decode($row['textname'])); ?>">READ MORE</a></p>
	</div>
	<div class="clear"></div>
</div>
<?php
	}
?>

<!-- [2] : JCarousel Latest Product Style -->
<style type="text/css" media="screen">
<!--
/*label { display: block; } */

.carousel_link2:link , .carousel_link2:visited {
	text-align:left; 
	margin:0 auto;
	width:230px;
	display: block;
	color:#FFFFFF;
	background-color:#FFFFFF;/**/
	/*border-right:solid 5px transparent;/**/
}
.carousel_link2:hover , .carousel_link2:active{
	text-align:left; 
	margin:0 auto;
	width:230px;
	display: block;
	color:#D1A267;
	/*background-color:#FFFFFF;/**/
	border-right:solid 5px transparent;/**/
}

.infiniteCarousel2 {
	width: 770px; /**/
	position: relative;
}

.infiniteCarousel2 .wrapper2 {
	width: 690px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
	height: 160px;
	overflow: auto;
	position: absolute;
	top: 0;
	/*margin: 0 40px;*/
	margin: 10px 0 0 40px;
	
}

.infiniteCarousel2 ul a img {
	/*border: 5px solid #000;*/
	/*-moz-border-radius: 5px;*/
	/*-webkit-border-radius: 5px;*/
}


.infiniteCarousel2 .wrapper ul {
	width: 230px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	top: 0;
}
/* single item * n */

.infiniteCarousel2 .wrapper2 ul {
	width: 230px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	top: 0;
}
/* single item * n */

.infiniteCarousel2 ul li {
	display:block;
	float:left;
	/*padding: 10px;/**/
	/*border: solid 1px black;*/
	width: 230px;
}

.infiniteCarousel2 ul li img {
	/*-webkit-transition: border-color 400ms;*/
}

.infiniteCarousel2 ul:hover li img {
	border-color: #000;
}

.infiniteCarousel2 ul:hover li:hover img {
	border-color: #333;
}

.infiniteCarousel2 ul li a img {
	display:block;
	margin:0 0 0 5px;
	width: 230px; /*set image width max*/
	height: 150px; /*set image height max*/
}

.infiniteCarousel2 .arrow {
	display: block;
	height: 36px;
	width: 37px;
	background: url(source/front/jquery/JCarousel/img/arrow.png) no-repeat 0 0;
	text-indent: -999px;
	position: absolute;
	top: 70px;	/*set arrow vertical position both right and left*/
	cursor: pointer;
	outline: 0;
	<?php if($num_lp > 3) { echo ""; } else { echo "display:none;"; } ?>
}

.infiniteCarousel2 .forward2 {
	background-position: 0 0;
	right: 0;
}

.infiniteCarousel2 .back2 {
	background-position: 0 -72px;
	left: 0;
}

.infiniteCarousel2 .forward2:hover {
	background-position: 0 -36px;
}

.infiniteCarousel2 .back2:hover {
	background-position: 0 -108px;
}



-->
</style>

<!-- [2] : JCarousel Latest Product (3) Script -->
<script type="text/javascript" charset="utf-8">

(function () {
    $.fn.infiniteCarousel2 = function () {
        function repeat2(str, n) {
            return new Array( n + 1 ).join(str);
        }
        
        return this.each(function () {
            // magic!
            var $wrapper2 = $('> div', this).css('overflow', 'hidden'),
                $slider2 = $wrapper2.find('> ul').width(9999),
                $items2 = $slider2.find('> li'),
                $single2 = $items2.filter(':first')
                
                singleWidth2 = $single2.outerWidth(),
                visible2 = Math.ceil($wrapper2.innerWidth() / singleWidth2),
                currentPage2 = 1,
                pages2 = Math.ceil($items2.length / visible2);
                
            /* TASKS */
            
            // 1. pad the pages2 with empty element if required
            if ($items2.length % visible2 != 0) {
                // pad
                $slider2.append(repeat2('<li class="empty" />', visible2 - ($items2.length % visible2)));
                $items2 = $slider2.find('> li');
            }
            
            // 2. create the carousel padding on left and right (cloned)
            $items2.filter(':first').before($items2.slice(-visible2).clone().addClass('cloned'));
            $items2.filter(':last').after($items2.slice(0, visible2).clone().addClass('cloned'));
            $items2 = $slider2.find('> li');
            
            // 3. reset scroll
            $wrapper2.scrollLeft(singleWidth2 * visible2);
            
            // 4. paging function
            function gotoPage2(page) {
                var dir = page < currentPage2 ? -1 : 1,
                    n = Math.abs(currentPage2 - page),
                    left = singleWidth2 * dir * visible2 * n;
                
                $wrapper2.filter(':not(:animated)').animate({
                    scrollLeft : '+=' + left
                }, 500, function () {
                    // if page == last page - then reset position
                    if (page > pages2) {
                        $wrapper2.scrollLeft(singleWidth2 * visible2);
                        page = 1;
                    } else if (page == 0) {
                        page = pages2;
                        $wrapper2.scrollLeft(singleWidth2 * visible2 * pages2);
                    }
                    
                    currentPage2 = page;
                });
            }
            
            // 5. insert the back and forward link
            $wrapper2.after('<a href="#" class="arrow back2"></a><a href="#" class="arrow forward2"></a>');
            
            // 6. bind the back and forward links
            $('a.back2', this).click(function () {
                gotoPage2(currentPage2 - 1);
                return false;
            });
            
            $('a.forward2', this).click(function () {
                gotoPage2(currentPage2 + 1);
                return false;
            });
            
            $(this).bind('goto', function (event, page) {
                gotoPage2(page);
            });
            
            // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
            $(this).bind('next2', function () {
                gotoPage2(currentPage2 + <?php if($num_lp > 3) { echo "1"; } else { echo "0"; } ?>);
            });
        });
    };
})(jQuery);


$(document).ready(function () {
    // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
	var autoscrolling2 = true;
	
    $('.infiniteCarousel2').infiniteCarousel2().mouseover(function () {
        autoscrolling2 = false;
    }).mouseout(function () {
        autoscrolling2 = true;
    });
    
    setInterval(function () {
        if (autoscrolling2) {
            $('.infiniteCarousel2').trigger('next2');
        }
    }, 2000);
});

</script>

<!-- [1] : JCarousel Product Category (1) or (2) Style -->
<style type="text/css" media="screen">
<!--
/*label { display: block; } */

.carousel_link:link , .carousel_link:visited {
	text-align:left; 
	margin:0 auto;
	width:350px;
	display: block;
	color:#FFFFFF;
	background-color:#d4d4d4;
	border-right:solid 5px transparent;/**/
}
.carousel_link:hover , .carousel_link:active{
	text-align:left; 
	margin:0 auto;
	width:350px;
	display: block;
	color:#D1A267;
	background-color:#d4d4d4;
	border-right:solid 5px transparent;/**/
}

.carousel_span{
	background-color:#664e36;
	width:340px;
	height:23px;
	display:block;/**/
	padding: 2px 5px 0 5px;
	font-size:14pt;
	font-family: Arial;
	margin:5px 5px 0 5px;
}

.infiniteCarousel {
	width: <?php if($promo) { echo "377px"; } else { echo "770px"; } ?>; /**/
	position: relative;
}

.infiniteCarousel .wrapper {
	width: 350px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
	height: 224px;
	overflow: auto;
	position: absolute;
	top: 0;
	/*margin: 0 40px;*/
	margin: 10px 0 0 11px;
	background-color:#d4d4d4;
	border-right:solid 5px #d4d4d4;
}

.infiniteCarousel .wrapper2 {
	width: 700px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
	height: 224px;
	overflow: auto;
	position: absolute;
	top: 0;
	/*margin: 0 40px;*/
	margin: 10px 0 0 35px;
	background-color:#d4d4d4;
	border-right:solid 5px #d4d4d4;
}

.infiniteCarousel ul a img {
	/*border: 5px solid #000;*/
	/*-moz-border-radius: 5px;*/
	/*-webkit-border-radius: 5px;*/
}


.infiniteCarousel .wrapper ul {
	width: 350px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	top: 0;
}
/* single item * n */

.infiniteCarousel .wrapper2 ul {
	width: 350px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	top: 0;
}
/* single item * n */

.infiniteCarousel ul li {
	display:block;
	float:left;
	/*padding: 10px;/**/
	/*border: solid 1px black;*/
	width: 350px;
}

.infiniteCarousel ul li img {
	/*-webkit-transition: border-color 400ms;*/
}

.infiniteCarousel ul:hover li img {
	border-color: #000;
}

.infiniteCarousel ul:hover li:hover img {
	border-color: #333;
}

.infiniteCarousel ul li a img {
	display:block;
	margin:0 0 0 5px;
	width: 350px; /*set image width max*/
	height: 150px; /*set image height max*/
}

.infiniteCarousel .arrow {
	display: block;
	height: 36px;
	width: 37px;
	background: url(source/front/jquery/JCarousel/img/arrow.png) no-repeat 0 0;
	text-indent: -999px;
	position: absolute;
	top: 194px;	/*set arrow vertical position both right and left*/
	cursor: pointer;
	outline: 0;
	<?php if(($num_pc > 1 && $promo) || ($num_pc > 2 && $promo == false)) { echo ""; } else { echo "display:none;"; } ?>
}

.infiniteCarousel .forward {
	background-position: 0 0;
	right: <?php if($promo) { echo "16px"; } else { echo "35px"; } ?>;
}

.infiniteCarousel .back {
	background-position: 0 -72px;
	left: <?php if($promo) { echo "16px"; } else { echo "40px"; } ?>;
}

.infiniteCarousel .forward:hover {
	background-position: 0 -36px;
}

.infiniteCarousel .back:hover {
	background-position: 0 -108px;
}



-->
</style>

<!-- [1] : JCarousel Product Category Script -->
<script type="text/javascript" charset="utf-8">

(function () {
    $.fn.infiniteCarousel = function () {
        function repeat(str, n) {
            return new Array( n + 1 ).join(str);
        }
        
        return this.each(function () {
            // magic!
            var $wrapper = $('> div', this).css('overflow', 'hidden'),
                $slider = $wrapper.find('> ul').width(9999),
                $items = $slider.find('> li'),
                $single = $items.filter(':first')
                
                singleWidth = $single.outerWidth(),
                visible = Math.ceil($wrapper.innerWidth() / singleWidth),
                currentPage = 1,
                pages = Math.ceil($items.length / visible);
                
            /* TASKS */
            
            // 1. pad the pages with empty element if required
            if ($items.length % visible != 0) {
                // pad
                $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
                $items = $slider.find('> li');
            }
            
            // 2. create the carousel padding on left and right (cloned)
            $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));
            $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
            $items = $slider.find('> li');
            
            // 3. reset scroll
            $wrapper.scrollLeft(singleWidth * visible);
            
            // 4. paging function
            function gotoPage(page) {
                var dir = page < currentPage ? -1 : 1,
                    n = Math.abs(currentPage - page),
                    left = singleWidth * dir * visible * n;
                
                $wrapper.filter(':not(:animated)').animate({
                    scrollLeft : '+=' + left
                }, 500, function () {
                    // if page == last page - then reset position
                    if (page > pages) {
                        $wrapper.scrollLeft(singleWidth * visible);
                        page = 1;
                    } else if (page == 0) {
                        page = pages;
                        $wrapper.scrollLeft(singleWidth * visible * pages);
                    }
                    
                    currentPage = page;
                });
            }
            
            // 5. insert the back and forward link
            $wrapper.after('<a href="#" class="arrow back"></a><a href="#" class="arrow forward"></a>');
            
            // 6. bind the back and forward links
            $('a.back', this).click(function () {
                gotoPage(currentPage - 1);
                return false;
            });
            
            $('a.forward', this).click(function () {
                gotoPage(currentPage + 1);
                return false;
            });
            
            $(this).bind('goto', function (event, page) {
                gotoPage(page);
            });
            
            // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
            $(this).bind('next', function () {
                gotoPage(currentPage + <?php if(($num_pc > 1 && $promo) || ($num_pc > 2 && $promo == false)) { echo "1"; } else { echo "0"; } ?>);
            });
        });
    };
})(jQuery);

$(document).ready(function () {
    // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
    var autoscrolling = true;
    
    $('.infiniteCarousel').infiniteCarousel().mouseover(function () {
        autoscrolling = false;
    }).mouseout(function () {
        autoscrolling = true;
    });
    
    setInterval(function () {
        if (autoscrolling) {
            $('.infiniteCarousel').trigger('next');
        }
    }, 2000);
});


</script>

<!-- [3] : JCarousel Product Promo (1) or (2) Style -->
<style type="text/css" media="screen">
<!--
/*label { display: block; } */

.carousel_link3:link , .carousel_link3:visited {
	text-align:left; 
	margin:0 auto;
	width:350px;
	display: block;
	color:#FFFFFF;
	background-color:#d4d4d4;
	border-right:solid 5px transparent;/**/
}
.carousel_link3:hover , .carousel_link3:active{
	text-align:left; 
	margin:0 auto;
	width:350px;
	display: block;
	color:#D1A267;
	background-color:#d4d4d4;
	border-right:solid 5px transparent;/**/
}

.carousel_span{
	background-color:#664e36;
	width:340px;
	height:23px;
	display:block;/**/
	padding: 2px 5px 0 5px;
	font-size:14pt;
	font-family: Arial;
	margin:5px 5px 0 5px;
}

.infiniteCarousel3 {
	width: <?php if($product_category) { echo "377px"; } else { echo "770px"; } ?>; /**/
	position: relative;
}

.infiniteCarousel3 .wrapper {
	width: 350px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
	height: 224px;
	overflow: auto;
	position: absolute;
	top: 0;
	/*margin: 0 40px;*/
	margin: 10px 0 0 11px;
	background-color:#d4d4d4;
	border-right:solid 5px #d4d4d4;
}

.infiniteCarousel3 .wrapper2 {
	width: 700px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
	height: 224px;
	overflow: auto;
	position: absolute;
	top: 0;
	/*margin: 0 40px;*/
	margin: 10px 0 0 35px;
	background-color:#d4d4d4;
	border-right:solid 5px #d4d4d4;
}

.infiniteCarousel3 ul a img {
	/*border: 5px solid #000;*/
	/*-moz-border-radius: 5px;*/
	/*-webkit-border-radius: 5px;*/
}


.infiniteCarousel3 .wrapper ul {
	width: 350px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	top: 0;
}
/* single item * n */

.infiniteCarousel3 .wrapper2 ul {
	width: 350px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	top: 0;
}
/* single item * n */

.infiniteCarousel3 ul li {
	display:block;
	float:left;
	/*padding: 10px;/**/
	/*border: solid 1px black;*/
	width: 350px;
}

.infiniteCarousel3 ul li img {
	/*-webkit-transition: border-color 400ms;*/
}

.infiniteCarousel3 ul:hover li img {
	border-color: #000;
}

.infiniteCarousel3 ul:hover li:hover img {
	border-color: #333;
}

.infiniteCarousel3 ul li a img {
	display:block;
	margin:0 0 0 5px;
	width: 350px; /*set image width max*/
	height: 150px; /*set image height max*/
}

.infiniteCarousel3 .arrow {
	display: block;
	height: 36px;
	width: 37px;
	background: url(source/front/jquery/JCarousel/img/arrow.png) no-repeat 0 0;
	text-indent: -999px;
	position: absolute;
	top: 194px;	/*set arrow vertical position both right and left*/
	cursor: pointer;
	outline: 0;
	<?php if(($num_promo > 1 && $product_category) || ($num_promo > 2 && $product_category == false)) { echo ""; } else { echo "display:none;"; } ?>
}

.infiniteCarousel3 .forward3 {
	background-position: 0 0;
	right: <?php if($product_category) { echo "16px"; } else { echo "35px"; } ?>;
}

.infiniteCarousel3 .back3 {
	background-position: 0 -72px;
	left: <?php if($product_category) { echo "16px"; } else { echo "40px"; } ?>;
}

.infiniteCarousel3 .forward3:hover {
	background-position: 0 -36px;
}

.infiniteCarousel3 .back3:hover {
	background-position: 0 -108px;
}



-->
</style>

<!-- [3] : JCarousel Product Promo Script -->
<script type="text/javascript" charset="utf-8">

(function () {
    $.fn.infiniteCarousel3 = function () {
        function repeat3(str, n) {
            return new Array( n + 1 ).join(str);
        }
        
        return this.each(function () {
            // magic!
            var $wrapper3 = $('> div', this).css('overflow', 'hidden'),
                $slider3 = $wrapper3.find('> ul').width(9999),
                $items3 = $slider3.find('> li'),
                $single3 = $items3.filter(':first')
                
                singleWidth3 = $single3.outerWidth(),
                visible3 = Math.ceil($wrapper3.innerWidth() / singleWidth3),
                currentPage3 = 1,
                pages3 = Math.ceil($items3.length / visible3);
                
            /* TASKS */
            
            // 1. pad the pages3 with empty element if required
            if ($items3.length % visible3 != 0) {
                // pad
                $slider3.append(repeat3('<li class="empty" />', visible3 - ($items3.length % visible3)));
                $items3 = $slider3.find('> li');
            }
            
            // 3. create the carousel padding on left and right (cloned)
            $items3.filter(':first').before($items3.slice(-visible3).clone().addClass('cloned'));
            $items3.filter(':last').after($items3.slice(0, visible3).clone().addClass('cloned'));
            $items3 = $slider3.find('> li');
            
            // 3. reset scroll
            $wrapper3.scrollLeft(singleWidth3 * visible3);
            
            // 4. paging function
            function gotoPage3(page) {
                var dir = page < currentPage3 ? -1 : 1,
                    n = Math.abs(currentPage3 - page),
                    left = singleWidth3 * dir * visible3 * n;
                
                $wrapper3.filter(':not(:animated)').animate({
                    scrollLeft : '+=' + left
                }, 500, function () {
                    // if page == last page - then reset position
                    if (page > pages3) {
                        $wrapper3.scrollLeft(singleWidth3 * visible3);
                        page = 1;
                    } else if (page == 0) {
                        page = pages3;
                        $wrapper3.scrollLeft(singleWidth3 * visible3 * pages3);
                    }
                    
                    currentPage3 = page;
                });
            }
            
            // 5. insert the back and forward link
            $wrapper3.after('<a href="#" class="arrow back3"></a><a href="#" class="arrow forward3"></a>');
            
            // 6. bind the back and forward links
            $('a.back3', this).click(function () {
                gotoPage3(currentPage3 - 1);
                return false;
            });
            
            $('a.forward3', this).click(function () {
                gotoPage3(currentPage3 + 1);
                return false;
            });
            
            $(this).bind('goto', function (event, page) {
                gotoPage3(page);
            });
            
            // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
            $(this).bind('next3', function () {
                gotoPage3(currentPage3 + <?php if(($num_promo > 1 && $product_category) || ($num_promo > 2 && $product_category == false)) { echo "1"; } else { echo "0"; } ?>);
            });
        });
    };
})(jQuery);


$(document).ready(function () {
    // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
	var autoscrolling3 = true;
	
    $('.infiniteCarousel3').infiniteCarousel3().mouseover(function () {
        autoscrolling3 = false;
    }).mouseout(function () {
        autoscrolling3 = true;
    });
    
    setInterval(function () {
        if (autoscrolling3) {
            $('.infiniteCarousel3').trigger('next3');
        }
    }, 2000);
});


</script>